<template>
  <div class="business-details">
    <van-cell-group>
      <van-cell icon="phone-o" :value="phone" />
      <van-cell icon="location-o" :value="city" />
    </van-cell-group>
    <van-cell-group>
      <van-cell title="营业时间" :value="businessHours" icon="clock" />
      <van-cell
        title="酒店介绍"
        icon="column"
        size="large"
        :label="descriptor"
      />
    </van-cell-group>
    <van-cell-group class="map">
      <van-cell title="酒店地址" icon="location-o" />
      <amap class="Address" :width="10" :height="5" :point="point" />
    </van-cell-group>
  </div>
</template>

<script>
import Amap from "@/pages/public/map.vue";
export default {
  components: {
    Amap
  },
  data() {
    return {
      point: [114.12647, 22.68175],
      phone: "12345678901",
      city:
        "广东省深圳市龙岗区华南城花果山时代广场101号广东省深圳市龙岗区华南城花果山时代广场101号",
      businessHours: "24小时",
      descriptor: "你看这个房间它又大又宽"
    };
  }
};
</script>

<style lang="stylus" scoped>
.map {
  padding-bottom: 0.5rem;

  .Address {
    position: relative;
    top: -0.8rem;

    >>> .amap-logo {
      display: none; // 去掉高德地图logo

      img {
        display: none;
      }
    }

    >>> .amap-copyright {
      opacity: 0; // 去掉高德的版本号
    }
  }
}
</style>
